<template>
	<view class="container">
		<uni-forms ref="baseForm" :rules="rules" :modelValue="baseFormData" label-position="top" class="uni-forms">
			<uni-forms-item label="邮箱" required name="email">
				<uni-easyinput v-model="baseFormData.email" placeholder="请输入邮箱" />
			</uni-forms-item>
			<view  style="display: flex;flex-direction: row;justify-content: space-between;align-items: center;">
				<view  style="width: 60%;">
					<uni-forms-item label="验证码" required name="emailValidCode">
						<uni-easyinput    v-model="baseFormData.emailValidCode" placeholder="请输入验证码"></uni-easyinput>
					</uni-forms-item>
				</view>
				<view  style="width: 40%;margin-left: 5px;">
					<uni-forms-item label=""  name="emailcode">
						<button  size="mini" type="primary" @click="getCode()" v-if="!code">获取验证码</button>
						<button  size="mini" type="primary" v-else> {{times}} 秒后重新获取</button>
					</uni-forms-item>
				</view>
			</view>
			<uni-forms-item label="密码" required name="password">
				<uni-easyinput v-model="baseFormData.password" placeholder="请输入密码" type="password"/>
			</uni-forms-item>
			<uni-forms-item label="确认密码" required name="repassword">
				<uni-easyinput v-model="baseFormData.repassword" placeholder="确认密码"  type="password"/>
			</uni-forms-item>
			<uni-forms-item label="昵称" required name="nickName">
				<uni-easyinput v-model="baseFormData.nickName" placeholder="请输入昵称" />
			</uni-forms-item>
			<uni-forms-item label="头像" required name="avatar">
				<uni-file-picker  v-model="baseFormData.avatar" limit="1" :del-icon="false" disable-preview :imageStyles="imageStyles"
									file-mediatype="image"
									@select="selectImg"><uni-icons type="upload"></uni-icons></uni-file-picker>
			</uni-forms-item>
			<uni-forms-item label="简介">
				<uni-easyinput type="textarea" v-model="baseFormData.briefIntroduction" placeholder="请输入简介" />
			</uni-forms-item>
		</uni-forms>
		<view class="button-group">
			<button  type="primary" size="mini" @click="registerBtn(baseForm)">注册</button>
		</view>
	</view>
</template>

<script lang="ts" setup>
import { register,getEmailCode } from '@/api/app-user.ts';
import { baseUrl } from '@/api/request';
import { ref } from 'vue';
	const getcodeCode=()=>{
		getEmailCode({'email':baseFormData.value.email}).then(res=>{
			
		})
	}
	const selectImg=(data)=>{
		uni.uploadFile({
		    url: baseUrl+'/app/common/upload', //仅为示例，并非真实接口地址。
		    filePath:data.tempFiles[0].url,
			name:'file',
		    header: {
		        'Content-Type':'multipart/form-data'
		    },
		    success(result) {
				 baseFormData.value.avatar=result.data
		    },
		    fail(error){
		    }
		});
	}
	const times = ref(60)
	const code=ref(false)
	const getCode=async()=>{
		code.value=true
		getcodeCode()
		const  timeInerval = setInterval(()=>{
			if(times.value == 0){
				code.value=false
				clearInterval(timeInerval)
			}else{
				times.value--;
			}
		},1000)
	}
	const rules = ref(
	{
		nickName: {
			rules: [{
				required: true,
				errorMessage: '昵称不能为空'
			}]
		},
		avatar: {
			rules: [{
				required: true,
				errorMessage: '头像不能为空'
			}]
		},
		email: {
			rules: [{
				required: true,
				errorMessage: '邮箱不能为空'
			}]
		},
		password: {
			rules: [{
				required: true,
				errorMessage: '密码不能为空'
			}]
		},
		repassword: {
			rules: [{
				required: true,
				errorMessage: '确认密码不能为空'
			}]
		},
		emailValidCode:{
			rules: [{
				required: true,
				errorMessage: '验证码不能为空'
			}]
		},
		
	})
	const registerBtn=(ref)=>{
		ref.validate().then((res)=>{
			register(baseFormData.value).then(res=>{
				if(res.code === 200){
					uni.showToast({
						title:'注册成功',
						success() {
							uni.switchTab({
								url:'/pages/personcenter/index'
							})
						}
					})
				}
			})
		}).catch(err =>{
			console.log('err', err);
		})
	}
	const baseForm=ref()
	const baseFormData=ref({
		email:'',
		password:'',
		repassword:'',
		nickName:'',
		avatar:'',
		briefIntroduction:'',
		emailVaildCode:''
	})
	const imageStyles=ref(
	{
		width: 64,
		height: 64,
		border: {
			radius: '50%'
		}
	})
</script>

<style lang="scss" scoped>
	.uni-forms{
		padding: 2%;
	}
	.button-group {
		text-align: center;
	}
	.container{
		padding: 20px;
	}
</style>